<template>
    <view class="content">
        <view class="nav">
            <u-tabs :list="cate" :is-scroll="true" :current="current" @change="change" 
                gutter="30" active-color="#00b6bc" bg-color="#fff"></u-tabs>
        </view>
		
		<view class="wrapper" v-if="list&&list.length > 0">
			<swiper class="swiper" :autoplay="autoplay" :interval="interval"
				:duration="duration" :current="current" :display-multiple-items="1" @change="changeSwiper">
				
				<swiper-item v-for="(item, index) in list" :key="index">
					<view class="box">
					    <view class="item">
					        <image src="../../static/image/bg.png" class="bg"></image>
							<view class="i-cen">
								<view class="i-tit">
									<view>{{item.title}}</view>
									<view class="eng">Membership benefits</view>
								</view>
								<view class="i-down">
									<view class="i-down-t" v-if="item.ftitle">
										<image src="../../static/image/vip.png" class="vip-icon"></image>
										<scroll-view scroll-y="true" style="height: 250rpx;">
											<view class="text">
												<u-parse :html="item.ftitle"></u-parse>
											</view>
										</scroll-view>
									</view>
									<view class="i-down-d" v-if="item.content">
										<view class="u-flex  u-p-b-25 text-bold">
											<u-icon name="info-circle-fill" color="#00b6bc" size="36" class="u-m-r-10"></u-icon>
											<text>权益使用说明</text>
										</view>
										<scroll-view scroll-y="true" style="height: 250rpx;">
											<view class="text">
												<u-parse :html="item.content"></u-parse>
											</view>
										</scroll-view>
									</view>
								</view>
							</view>
					    </view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view>
		
		<view class="footer">
			<view class="btn" @click="toPay">购买健康管理卡</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0,
				cate: [],
				list: [],
				// data: {},
				id: '',
            };
        },
        onLoad(option) {
			if (option.id) {
				this.id = option.id
			}
            this.getContent()
        },
        methods: {
			changeSwiper(e) {
				console.log(e,e.detail.current)
				this.current = e.detail.current
			},
			
			toPay() {
				this.$gTo(`/pages/settle/settle`)
			},
			
            // 切换
            change(index) {
                if (this.current == index) return
                this.current = index
                // this.data = this.list[index]
            },
			
			getContent() {
				this.$ajax('get_content_list', {
					userToken: this.$getSync('userToken'),
					page: 1,
					limit: 999,
					type: 16,
					//16会员尊享 3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.list = ret.data
						// this.data = this.list[0]
						this.list.forEach((cur,index) => {
							this.cate.push({name: cur.title})
							if (this.id && this.id == cur.id) {
								this.current = index
							}
						})
						
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	
	.nav{
		background-color: #fff;
	    width: 750rpx;
	    white-space: nowrap;
	}
	
	.wrapper{
		width: 750rpx;
		white-space: nowrap;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		padding-left: 20rpx;
	}
	.swiper{
		width: 700rpx;
		// width: 636rpx;
		height: 920rpx;
	}
	.swiper-item{
		width: 700rpx;
		// width: 636rpx;
		height: 920rpx;
	}
	.box{
	    display: flex;
	    flex-wrap: nowrap;
	    justify-content: flex-start;
	    align-items: center;
	}
	
	.item{
		width: 700rpx;
		// width: 636rpx;
		height: 920rpx;
	    background: #fff;
		border-radius: 30rpx;
		margin-right: 25rpx;
	    position: relative;
	}
	.bg{
		width: 700rpx;
		// width: 636rpx;
		height: 181rpx;
	}
	.i-cen{
		width: 700rpx;
		// width: 636rpx;
		position: absolute;
		top: 35rpx;
		left: 0;
	}
	.i-tit{
		padding-left: 40rpx;
		padding-bottom: 25rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #9a3f02;
	}
	.eng{
		font-size: 20rpx;
		font-weight: normal;
		color: #ca8c51;
	}
	.i-down{
		background: #fff;
		border-radius: 30rpx;
		padding: 45rpx 25rpx;
	}
	.i-down-t{
		padding-bottom: 40rpx;
	}
	.vip-icon{
		width: 230rpx;
		height: 44rpx;
		margin-bottom: 25rpx;
	}
	.text{
		font-size: 26rpx;
		line-height: 1.5;
		word-break: break-all;
		white-space: pre-line;
	}
	.i-down-d{
		border-top: 2rpx dashed #e2e2e2;
		padding-top: 40rpx;
	}
	
	
	.footer{
		width: 750rpx;
		height: 120rpx;
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	

</style>
